What does 'display none' do?

The "display: none" property of an Element removes that element from the document flow. Redefining that element display property from none to any other dynamically, and vice versa, will again force the change in document flow. Each time requiring a recalculation of all elements under the stream cascade for new rendering.

What's the difference between display none and block2?

Here is the result of this style applied to the .block2 element: As you'll notice here, unlike display: none, the .block2 element is invisible, but its layout stays intact. In fact, the margin-right on this element is still there. Only the element itself is hidden.

Does a 'display none' property affect rendering performance?

Each time requiring a recalculation of all elements under the stream cascade for new rendering. So yes, a "display: none" property applied to a nonzero dimensional and free flow or relatively positioned element, will be a costly operation and therefore will worsen the performance!

Does display none improve dom performance?

Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom. Make an element display none or remove an element, trigger a reflow, but with display none you worst the performance because you don't have the benefit of reduce the dom.